import { Button } from "antd";
import { useNavigate } from "react-router-dom";

export default function Home() {
  /**
   * useNavigate() 返回一个 navigate 函数
   *
   *    navigate(pathname)
   *    navigate({
   *      pathname,
   *      hash,
   *      search
   *    })
   *
   *    navigate(pathname, { replace: true })   替换模式
   *
   */
  const navigate = useNavigate();

  function handleOne() {
    // console.log("navigate", navigate);

    // 1. to - 字符串
    // navigate("/about");

    // 2. to - 对象
    //    PS: state 属性，没有了，需要在第二个参数中传递
    navigate(
      {
        pathname: "/about",
        search: "a=1&b=2",
        hash: "abcd",
      },
      { state: { name: "张三", age: 18 } }
    );

    // 3. 重定向
    // navigate("/about", { replace: true });
  }

  return (
    <div>
      <h2>Home</h2>

      <Button onClick={handleOne}>to About</Button>
    </div>
  );
}
